<template>
  <div class="main">
    <el-container class="main-box">
      <el-aside width="149px" class="main-side">
        <Menus></Menus>
      </el-aside>
      <el-container class="main-right">
        <el-header height="80px">
          <Head></Head>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
        <el-footer>尾部栏</el-footer>
      </el-container>
    </el-container>
  </div>
</template>


<script>
import Head from "./Head.vue";
import Menus from "./Menus.vue";

export default {
  components: { Head, Menus },
};
</script> 

<style lang="scss" >
.main {
  width: 100%;
  height: 100%;
  .el-header {
    padding: 0;
  }
  .main-box {
    width: 100%;
    height: 100%;
    .main-side {
      height: auto;
      overflow: hidden;
      background: #545c64;
    }
  }

  .el-footer {
    background: rgba(0, 0, 0, 0.4);
  }
}
</style>